<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title2022/3/17</title>
    <script src="address.js"></script>

    <script src="jquery3.3.1.js"></script>
    <script type="text/javascript">

        $(document).ready(function (){
            let strProv = "";
            for (const addr of address) {

                if (addr.topId == 0){
                    strProv +=`<option value="${addr.id}">${addr.addName}</option>`
                }
            }
            $("#prov").html(strProv)
            $("#prov").change(function (){
                let strCity = ""
                for (const addr of address) {
                    if (addr.topId == $(this).val()){
                        strCity +=`<option value="${addr.addName}">${addr.addName}</option>`
                    }
                }
                $("#city").html(strCity)
                $("#city").change(function (){
                    let city = $(this).val().substring(0,$(this).val().length-1);
                    $.ajax({
                        type:'get',
                        url:'https://www.tianqiapi.com/api?version=v6&appid=21375891&appsecret=fTYv7v5E&city=' + city,
                        dataType:'json',
                        success:function (res){
                            let str = `${res.city}`
                            console.log(res)
                            $("#weather ").html(str)
                        },error:function (err){
                            console.log(err)
                        }
                    })
                })
            })
        })
    </script>



</head>
<body>
<div>
    <label><select name="prov" id="prov"></select></label>
    <label><select name="city" id="city"></select></label>
</div>
<div id="weather"></div>
</body>
</html>